<html>
<head>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">-->
	<title>我的公益名片</title>

    <!--<script type="text/javascript" src="{$root}/public/js/adapter.js"></script>-->
    <!--<script type="text/javascript" src="{$root}/public/js/jquery-1.7.2.min.js"></script>-->

	<!--<link href="{$root}/public/css/bootstrap.min.css" rel="stylesheet">-->

    <style>
        body{
            padding:0;
            margin:0;
            font-size:30px;
        }
        div{
            width:100%;
            margin:0 auto;

        }
        .content{
            min-width:480px;
            background:#EDEDED;
        }
        /*.title{*/
            /*font-size:2em;*/
            /*background:#1CBAD5;*/
            /*color:#FFFFFF;*/
            /*height:2.5em;*/
            /*line-height:2.5em;*/
            /*text-align:center;*/
            /*font-weight:800;*/
            /*clear:both;*/
            /*border-bottom:5px solid #FA8365;*/
        /*}*/
        .erm{
            width:90%;
            margin:0 auto;
            background:#FFFFFF;
            text-align:center;
            padding:100px 0 180px 0;
            color:#9A9A9A;
        }
        .erm img{
            margin:auto;
        }
        .info{

            background:#1CBAD5;
            text-align:center;
            color:#FFFFFF;
        }
        .circlebox{
            width:200px;
            height:70px;
            clear:both;
            position:relative;
            margin:0 auto 2em auto;
        }
        .circle{
            width:200px;
            height:200px;
            background:#1CBAD5;
            text-align:center;
            overflow:hidden;
            position:relative;
            border-radius:99px;
            border:3px solid #1CBAD5;
            top:-100px;
        }
        .item{
            text-align:center;
            padding:15px 0;
            font-size:2em;
        }


    </style>


</head>
<body>

<div class="content">
    <div class="erm">
        <!--二维码图片地址-->
        <img src="{$member.userQR}?t={$smarty.now}" style="width:50%;" />
        <div style="padding-top:20px; font-size:1em;">向管理员出示进行活动记录！	</div>
    </div>
    <div class="info">
        <div class="circlebox">
            <!--认证标志-->
            <img src="{$root}/public/img/icon_v.png" style="position:absolute; top:-90px; right:10px; z-index:99;">
            <div class="circle">
                <!--会员头像地址-->
                <img src="{$member.headUrl}" style="width:200px; height:200px; margin-top:0; border-radius:100px;"/>
            </div>
        </div>
        <!--志愿者姓名-->
        <div class="item" style="font-weight:800;">{$member.realName}</div>

        <div class="item" style="font-size:1em;">
            <!--星级图片地址，会员是几星级就显示几个星星-->
            {for $foo=1 to $member.level}
                <img src="{$root}/public/img/star_b.png"/>
            {/for}
		    <span style="position:relative; bottom:0.25em;">{$member.level}星志愿者</span>
        </div>

        <!--公益时间小时数-->
        <div class="item" style="font-weight:800; background:#1AA1C3; border-radius:1.2em; width:90%; height:2.4em; line-height:2.4em; margin-top:0.666em;">
            公益时间：{($member.allTimes/60)|string_format:"%d"}小时
        </div>

        <div class="item" style="padding-top:100px; font-size:0.7em; text-align:center; color:#45D8F1;">
            Generated by 志愿者打卡器
        </div>

    </div>

</div>


<script>
//    adaptUILayout.adapt(480); //适配当前页面
</script>

</body>
</html>